<template>
  <el-card>
    <div slot="header" class="card-header">
      <span>{{ this.$route.meta.title }}</span>
      <div>
        <el-button type="primary">添加</el-button>
        <el-button type="danger">删除</el-button>
      </div>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="columnA" label="敏感字段"> </el-table-column>
      <el-table-column prop="columnB" label="字段含义"> </el-table-column>
      <el-table-column prop="columnC" label="设置部门"> </el-table-column>
      <el-table-column prop="columnD" label="设置日期"> </el-table-column>
      <el-table-column prop="columnG" label="操作">
        <template>
          <el-button type="primary" size="small">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination />
    </div>
  </el-card>
</template>

<script>
import Pagination from './Pagination'
export default {
  components: {
    Pagination
  },

  data() {
    return {
      tableData: [
        {
          columnA: '台湾',
          columnB: '中国的一个省',
          columnC: '通讯部',
          columnD: '2018.3.5',
          columnG: true
        },
        {
          columnA: '藏独',
          columnB: '中国的一个自治区',
          columnC: '通讯部',
          columnD: '2018.3.5',
          columnG: true
        },
        {
          columnA: '疆独',
          columnB: '中国的一个自治区',
          columnC: '通讯部',
          columnD: '2018.4.8',
          columnG: true
        },
        {
          columnA: '解放军',
          columnB: '中国的一种职业',
          columnC: '通讯部',
          columnD: '2019.2.6',
          columnG: false
        },
        {
          columnA: '警察',
          columnB: '中国的一种职业',
          columnC: '客户服务部',
          columnD: '2019.6.1',
          columnG: true
        },
        {
          columnA: '天安门事件',
          columnB: '涉及国家安全的',
          columnC: '安全部',
          columnD: '2020.5.8',
          columnG: true
        },
        {
          columnA: '昆明事件',
          columnB: '涉及国家安全的',
          columnC: '安全部',
          columnD: '2020.5.8',
          columnG: false
        },
        {
          columnA: '香港国安法',
          columnB: '涉及国家安全的',
          columnC: '安全部',
          columnD: '2020.6.8',
          columnG: false
        },
        {
          columnA: '国民党',
          columnB: '中国党派',
          columnC: '市场部',
          columnD: '2020.8.1',
          columnG: false
        },
        {
          columnA: '华为芯片',
          columnB: '华为的芯片',
          columnC: '市场部',
          columnD: '2020.8.1',
          columnG: true
        },
        {
          columnA: '共产党',
          columnB: '中国党派',
          columnC: '市场部',
          columnD: '2020.8.1',
          columnG: true
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  float: right;
  margin: 10px;
}
</style>
